<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
.tab{ border: 1px #ff0000 solid; width: 500px; height: 300px; display: none;}
.active{ color: #ff0000}
</style>
<body>

<button class="active">1</button>
<button>2</button>
<button>3</button>
<div class="tab" style="display: block;">1</div>
<div class="tab">2</div>
<div class="tab">3</div>

<script >
function(n){

var x = document.getElementsByClassName("tab");
var y = document.getElementsByTagName("button");
 for(n=0; n<y.length; n++){

  // console.log(tab);
    y[n].onclick = function (){
      console.info(this)
         for(y=0;y<x.length;y++){
            y[i].className = "";
            div[y].style.display="none"
         }
         this.className="active";
         div[y].style.display="block"
     
    }(i)

 }



}




</script>


</body>
</html>